<template>
  <el-card v-if="ojName != 'HDU'" class="box-card">
    <div slot="header">
      <img class="fixImage" :src="imgSrc">
      <span>{{ ojName }}</span>
      <el-tooltip effect="dark" content="重新绑定" placement="bottom" @click.native="submit">
        <el-button type="text" :icon="icon" />
      </el-tooltip>
    </div>
    <el-input v-model="account" :placeholder="defaultAccount" @keyup.enter.native="submit" />
  </el-card>
</template>

<script>
import { updateOjAccount } from '@/networks/info'
import { crawlerOj } from '@/networks/dynamic'

import { apiLeetcode, apiNowcoder, apiVjudge,
  apiLoj, apiLuogu, apiHdu, apiCodeforces } from '@/networks/ojCheck'

export default {
  name: 'BindOjItem',
  props: {
    imgSrc: {
      type: String,
      default: require('@/assets/oj/hdu.png')
    },
    ojName: {
      type: String,
      default: 'HDU'
    },
    defaultAccount: {
      type: String,
      default: '没有绑定'
    }
  },
  data() {
    return {
      account: '',
      icon: 'el-icon-refresh',
      iconRefresh: 'el-icon-refresh',
      iconLoading: 'el-icon-loading'
    }
  },
  methods: {
    async submit() {
      this.icon = this.iconLoading
      const account = this.account
      let ok = true
      if (this.account === '') {
        this.$message.error('用户名不能为空')
        ok = false
      } else if (this.ojName === 'Leetcode') {
        const user = await apiLeetcode(account)
        if (user.data.data.userProfilePublicProfile == null) {
          this.$message.error('用户不存在')
          ok = false
        }
      } else if (this.ojName === 'NowCoder') {
        if (isNaN(account)) {
          this.$message.error('牛客网的输入必须是用户ID（数字格式）')
          ok = false
        } else {
          const user = await apiNowcoder(account)
          if (user.data.includes('用户不存在')) {
            this.$message.error('用户不存在')
            ok = false
          }
        }
      } else if (this.ojName === 'VJudge') {
        try {
          await apiVjudge(account)
        } catch (error) {
          this.$message.error('用户不存在')
          ok = false
        }
      } else if (this.ojName === 'LOJ') {
        const user = await apiLoj(account)
        if (user.data.error != null) {
          this.$message.error('用户不存在')
          ok = false
        }
      } else if (this.ojName === 'Luogu') {
        let user = await apiLuogu(account)
        user = user.data
        if (user.data.users[0] == null) {
          this.$message.error('用户不存在')
          ok = false
        } else {
          if (this.account !== user.data.users[0].uid) {
            this.$message.success('自动切换到您luogu的id')
            this.account = user.data.users[0].uid
          }
        }
      } else if (this.ojName === 'HDU') {
        const user = await apiHdu(account)
        if (user.data.includes('No such user')) {
          this.$message.error('用户不存在')
          ok = false
        }
      } else if (this.ojName === 'Codeforces') {
        const user = await apiCodeforces(account)
        if (user.data.includes('No items matched')) {
          this.$message.error('用户不存在')
          ok = false
        }
      }
      if (!ok) this.icon = this.iconRefresh
      else {
        this.bindAccount()
      }
    },
    bindAccount() {
      updateOjAccount({
        account: this.account,
        ojName: this.ojName
      }).then(res => {
        const data = res.data
        this.icon = this.iconRefresh
        if (data.status === 0) {
          this.$message.error(data.msg)
        } else {
          this.$message.success(data.msg)
          crawlerOj({
            account: this.account,
            ojName: this.ojName
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-tooltip {
    margin-bottom: 18px;
  }

  .fixImage {
    width: 32px;
    height: 32px;
    position: relative;
    right: 5px;
    top: 6px;
  }

  .box-card {
    width: 295px;
    margin-bottom: 10px;
    margin-left: 20px;
  }

  .el-button {
    font-size: 20px;
    float: right;
  }
</style>
